<template>
	<view class="x-money">
		<slot name="prefix"></slot>
		<text :class="[`text-${props.type}`, `font-weight-${props.weight}`, `h${props.size}`]">{{ text }}</text>
		<text class="h10" :class="[`text-${props.unitType}`]">{{ unit }}</text>
		<slot name="suffix"></slot>
	</view>
</template>

<script setup lang="ts">
import { ref, watchEffect, defineProps } from "vue";
import { formatNumber } from "@/utils";
const props = withDefaults(defineProps<{
	money: number | string
	type?: string
	unit?: string
	unitType?: string
	weight?: string
	size?: string
	precision?: number
	abbreviation?: boolean
}>(), {
	money: 0,
	type: 'danger',
	unit: '元',
	unitType: 'grey',
	weight: '500',
	size: '9',
	precision: 2,
	abbreviation: true
});
const text = ref('');
const unit = ref(props.unit);
watchEffect(() => {
	let n = Number(props.money);
	if (isNaN(n)) {
		unit.value = props.unit;
		text.value = props.money;
	} else if (props.abbreviation && props.money >= 100000000) {
		unit.value = `亿${props.unit}`
		text.value = formatNumber(props.money / 100000000, props.precision);
	} else if (props.abbreviation && props.money >= 10000) {
		unit.value = `万${props.unit}`
		text.value = formatNumber(props.money / 10000, props.precision);
	} else {
		unit.value = props.unit;
		text.value = formatNumber(props.money, props.precision)
	}
})
</script>

<style lang="scss" scoped>
.x-money {
	display: inline-flex;
	align-items: baseline;

	&-unit {
		font-size: 10px;
		color: var(--xl-grey);
	}
}
</style>